<template>
  <div>
    <el-skeleton :loading="loading" animated>
      <template slot="template">
        <div class="helpBox">
          <el-skeleton-item variant="h1" style="width: 100%;height: 50px;margin: 20px 0;"/>
          <hr>
          <el-skeleton-item variant="h2" style="width: 100px;height: 30px;margin: 10px 0;display: block;"/>
          <el-skeleton-item variant="p" style="width: 80%;height: 20px;margin: 5px 0;"/>
          <el-skeleton-item variant="p" style="width: 100%;height: 20px;margin: 5px 0;"/>
          <el-skeleton-item variant="p" style="width: 100%;height: 20px;margin: 5px 0;"/>
          <el-skeleton-item variant="p" style="width: 50%;height: 20px;margin: 5px 0;"/>
          <el-skeleton-item variant="p" style="width: 100%;height: 20px;margin: 5px 0;"/>
          <el-skeleton-item variant="p" style="width: 30%;height: 20px;margin: 5px 0;"/>
        </div>
      </template>
      <template>
        <le-preview class="helpBox" ref="md-preview" :is-md="true" :value="mdContent" :hljs-css="hljsCss"></le-preview>
      </template>
    </el-skeleton>
  </div>
</template>

<script>
import {mapActions, mapGetters} from "vuex";
export default {
  name: "Help",
  data() {
    return {
      hljsCss: 'agate',
      mdContent: require('@/assets/ReadMe.md').default
    }
  }, mounted() {
    this.asyncChangeTempLoading(false);
  },
  methods: {
    ...mapActions({asyncChangeTempLoading: 'asyncChangeTempLoading'})
  },
  computed: {
    ...mapGetters({loading: "getTempLoading"})
  }
}
</script>

<style scoped>
.helpBox {
  padding: 10px 30px;
}
</style>